製造業で普及が進む 2 次元バーコード規格「DataMatrix」のスキャナーを Next.js で実装してみた
2024.12.21こんにちは、製造ビジネステクノロジー部の若槻です。
本記事は クラスメソッド発 製造業 Advent Calendar 2024 の21日目の記事となります。
今回は、製造業で普及が進む 2 次元バーコード規格 DataMatrix のスキャナーを Next.js で実装してみた内容を紹介します。
DataMatrix とは
DataMatrix（データマトリックス）は 2 次元コードの一種で、製造業、とりわけ電子部品産業や半導体産業で利用されることが多い規格です。コード規格としての標準化の歴史はおおよそ以下のようになります。
- 1987年 アイディアマトリックス社により開発される。
- 1996年 バーコードの業界団体である国際自動認識工業会 (AIMI) の ISS (International Symbology Specification) に登録される。
- 2000年 国際標準化機構 (ISO) および国際電気標準会議 (IEC) で標準化される。
ここで、もう一つのメジャーな 2 次元コード規格である「QR コード」がISS に登録されたのは 1997 年、ISO/IEC の規格となったのは 2000 年でしたので、両規格は同じような歩みで標準化されてきた歴史を持っていると言えます。
仕様比較
DataMatrix には正方形と長方形の 2 種類のタイプがあり、それぞれの形状によって最大セルサイズや最大文字数、誤り訂正能力が異なります。QR コードを含めた比較を以下に示します。
| DataMatrix（正方形） | DataMatrix（長方形） | QR コード(モデル2) | rMQR | マイクロ QR | |
|---|---|---|---|---|---|
| 最大セルサイズ | 144×144 | 16×48 | 177×177 | 17×139 | 17×17 |
| 最小セルサイズ | 10×10 | 8×16 | 21×21 | 7×43 | 11×11 |
| 最大文字数(英数字) | 2,335 | 72 | 4,296 | 219 | 21 |
| 誤り訂正能力(%) | 14〜39 | 18〜38 | 7〜30 | 15〜30 | 7〜25 |
| サンプル |  |
 |
 |
 |
 |
他の規格に比べて DataMatrix は小さなセルサイズでも比較的高い誤り訂正率を維持できるため、電子部品や半導体など小さな部品への製造情報の印字に利用されることが多い規格となっています。
参考
スキャナーライブラリ選定
DataMatrix コードに対応している React 向けスキャナーライブラリを探したところ、以下の 2 つが有力そうでした。
| 最終リリース | スター数 | |
|---|---|---|
| yudielcurbelo/react-qr-scanner | 先週 | 266 |
| react-qr-barcode-scanner | 4日前 | 83 |
今回はこのうち前回の記事で rMQR および マイクロ QR コードスキャナーの実装にも使用した yudielcurbelo/react-qr-scanner を引き続き使ってみます。
スキャナーアプリの実装
Next.js アプリ初回セットアップ
Next.js のドキュメントを参考に、TypeScript ベースの Next.js アプリの初回セットアップを行います。
npx create-next-app sample-next-app --typescript
cd sample-next-app
yudielcurbelo/react-qr-scanner の導入
@yudiel/react-qr-scanner を npm でインストールします。
npm install @yudiel/react-qr-scanner
スキャナー画面の実装
スキャナー機能を追加する画面の実装です。Scanner コンポーネントがスキャナーで、formats にバーコードの形式として 'matrix_codes' を指定し、DataMatrix 形式のバーコードを読み取るようにします。
'use client';
import React, { useState } from 'react';
import { Scanner, IDetectedBarcode } from '@yudiel/react-qr-scanner';
const Home = () => {
const [scanResult, setScanResult] = useState({ format: '', rawValue: '' });
const handleScan = (results: IDetectedBarcode[]) => {
if (results.length > 0) {
setScanResult({
format: results[0].format,
rawValue: results[0].rawValue,
});
}
};
return (
<div className='h-screen flex flex-col items-center'>
<h1>QR コードをスキャンしてください</h1>
<div className='w-[300px]'>
<Scanner
onScan={handleScan}
formats={[
'matrix_codes', // DataMatrix
]}
allowMultiple={true}
/>
</div>
{scanResult.rawValue && (
<div className='mt-4 p-2 border border-gray-300 rounded'>
<p>
<strong>フォーマット:</strong> {scanResult.format}
</p>
<p>
<strong>内容:</strong> {scanResult.rawValue}
</p>
</div>
)}
</div>
);
};
export default Home;
ちなみに DataMatrix の「正方形」または「長方形」のいずれのタイプを読み取るかの指定はないようでした。
動作確認
Next.js アプリケーションを実行してスキャナーアプリを起動します。
npm run dev
先ほどサンプルとして示した DataMatrix 形式のバーコードのデータをモニター上に表示し、Next.js アプリケーションを起動した PC に接続した Web カメラで読み取ってみます。
DataMatrix (18×18 正方形) 形式のバーコードをスキャンすると、データを読み取ることができました。
DataMatrix (36×16 長方形) 形式のバーコードをスキャンすると、データを読み取ることができました。
ライブラリとしては DataMatrix のタイプが正方形であるか長方形であるかに関わらず読み取り可能となっているのですね。
バーコードの一部を隠してみる
DataMatrix（正方形）は約 14〜39 ％の誤り訂正能力を持っており、バーコード表面の汚損などに比較的強いフォーマットとなっています。先程のバーコードの一部を実際に隠して読み取らせてみます。
バーコード中央の 3×3 セルを隠して、約 2.8 ％ (=3×3/18×18) を見えなくした場合。
データを読み取ることができました。
続いてバーコード中央の 5×5 セルを隠して、約 7.7 ％ (=5×5/18×18) を見えなくした場合。
データを読み取ることができました。しかし最初画像データを拡大した状態だとなかなか読み取れず、少し縮小したら読み取れました。
最後にバーコード中央の 7×7 セルを隠して、約 15.1 ％ (=7×7/18×18) を見えなくした場合。
この場合はデータを読み取ることができませんでした。
バーコード中の読み取れなくなった部分の割合が誤り訂正能力内であっても、隠された割合が大きくなるほど読み取りが難しくなるようです。
高い誤り訂正能力を持っていてもやはりバーコード表面の汚損対策やスキャン時の反射対策などは必要となりそうです。
おわりに
製造業で普及が進む 2 次元バーコード規格 DataMatrix のスキャナーを Next.js で実装してみた内容を紹介しました。実装するだけでなく誤り訂正能力の検証も行うことができました。今後 QR コードと同様に製造現場や製品で見かけることが多くなりそうなので製造業に関わる方々にとっては特に参考になるかと思います。
参考
サンプルバーコード生成に使用したサイト
- https://www.barcodesoft.com/ja/free-online-barcode-generator/data-matrix-barcode
- https://www.cman.jp/QRcode/qr_make/
- https://barcode.tec-it.com/en/MicroQR
- https://rmqr.oudon.xyz/
以上
